<template>
	<view class="logistics-status">
		<text :class="statusClass">{{ statusText }}</text>
		<text class="logistics-no" v-if="row.logisticsNo">单号: {{ row.logisticsNo }}</text>
		<uni-icons type="forward" size="14" color="#999" @click="$emit('viewLogistics', row)" />
	</view>
</template>

<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps<{ row: any }>();
defineEmits(['viewLogistics']);

const statusTextMap: Record<string, string> = {
	unpaid: '待付款',
	paid: '已付款',
	shipped: '已发货',
	received: '已收货',
	completed: '已完成',
	cancelled: '已取消'
};

const statusClassMap: Record<string, string> = {
	unpaid: 'pending',
	paid: 'paid',
	shipped: 'shipped',
	received: 'received',
	completed: 'completed',
	cancelled: 'cancelled'
};

const statusText = computed(() => statusTextMap[props.row.orderStatus] || '暂无信息');
const statusClass = computed(() => statusClassMap[props.row.orderStatus]);
</script>

<style scoped>
.logistics-status {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 26rpx;
	margin: 12rpx 0;
}
.pending {
	color: #ff9900;
}
.paid {
	color: #007aff;
}
.shipped {
	color: #19be6b;
}
.received,
.completed {
	color: #333;
}
.cancelled {
	color: #999;
}
.logistics-no {
	flex: 1;
	margin: 0 16rpx;
	color: #666;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>
